let imgCont = 0;

let LazyImg = {
  template: `<img :id="'img' + imgNumber" :data-size="src" src="https://zhjzt.china9.cn//static/common/img/zihai/seat.png" :alt="alt" />`,
  props: {
		src: String,
    alt: String
	},
  setup(props) {
    const { ref, onMounted, onBeforeMount } = Vue;
    const imgNumber = ref(0);
		// 懒加载
		const observer = new IntersectionObserver((entries) => {
			entries.forEach((entry) => {
        // console.log(entry, 'entry')
				if (entry.isIntersecting) {
					const img = entry.target;
					const src = img.getAttribute('data-size');
					img.src = src;
					observer.unobserve(img);
				}
			})
		})

    onBeforeMount(() => {
		  imgCont++
      imgNumber.value = imgCont
    })

		onMounted(() => {
      const targetElement = document.querySelector('#img' + imgNumber.value);
      // console.log(targetElement, 'targetElement')
      if (targetElement) observer.observe(targetElement);
		})

		return {
			observer, imgNumber
		}
  }
}